<template>
  <div class="mode_main">
    <v-header headTitle="发布闲置" goBack="true"></v-header>
    <div class="seller_row" @click="toModeResell()">
      <div class="row_content">
        <img src="./images/zhuanmaixianzhi@2x.png" alt="">
        <div class="title_box">
          <h2>转卖闲置</h2>
          <p>转卖对自己没有用的物品</p>
        </div>
      </div>
      <div class="row_btn">
        <img src="./images/fanhui1@2x.png" alt="">
      </div>
    </div>
    <div class="buyer_row">
      <div class="row_content">
        <img src="./images/qiugouxianzhi@2x.png" alt="">
        <div class="title_box">
          <h2>求购闲置</h2>
          <p>看看周边，购买自己需要的</p>
        </div>
      </div>
      <div class="row_btn">
        <img src="./images/fanhui1@2x.png" alt="">
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .mode_main{
    width: 100%;
    padding-top: 40px;
    .seller_row{
      width: 100%;
      height: 60px;
      background: #fff;
      margin-top: 10px;
      .row_content{
        width: 90%;
        height: 100%;
        float: left;
        img{
          width: 29px;
          height: 29px;
          padding-top: 15px;
          padding-left: 20px;
          display: block;
          float: left;
        }
        .title_box{
          float: left;
          padding-left: 10px;
          h2 {
            font-family: "Microsoft YaHei";
            font-size: 15px;
            font-weight: lighter;
            padding: 0;
            margin: 0;
            line-height: 35px;
          }
          p {
            font-size: 12px;
            color: #000;
            font-weight: lighter;
            margin: 0;
            padding: 0;
            /*line-height: 35px;*/
          }
        }
      }
      .row_btn{
        width: 10%;
        height: 100%;
        float: right;
        text-align: center;
        line-height: 66px;
        img{
          width: 15px;
          height: 20px;
        }
      }
    }
    .buyer_row{
      width: 100%;
      height: 60px;
      background: #fff;
      margin-top: 10px;
      .row_content{
        width: 90%;
        height: 100%;
        float: left;
        img{
          width: 29px;
          height: 29px;
          padding-top: 15px;
          padding-left: 20px;
          display: block;
          float: left;
        }
        .title_box{
          float: left;
          padding-left: 10px;
          h2 {
            font-family: "Microsoft YaHei";
            font-size: 15px;
            font-weight: lighter;
            padding: 0;
            margin: 0;
            line-height: 35px;
          }
          p {
            font-size: 12px;
            color: #000;
            font-weight: lighter;
            margin: 0;
            padding: 0;
            /*line-height: 35px;*/
          }
        }
      }
      .row_btn{
        width: 10%;
        height: 100%;
        float: right;
        text-align: center;
        line-height: 66px;
        img{
          width: 15px;
          height: 20px;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'

  export default {
    name: 'Mode',
    data () {
      return {}
    },
    components: {
      'v-header': headTop
    },
    methods: {
      toModeResell () {
        this.$router.push('/publish/ModeResell')
      }
    }
  }
</script>
